<!-- 交货要求动态控件 1213-->
<template>
  <a-space direction="vertical" style="width: 100%">
    <div class="content">
      <a-table
        stripe
        :bordered="{
          headerCell: true,
        }"
        :pagination="false"
        :data="props.props.data"
      >
        <template #columns>
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            title="物料编号"
            align="center"
            :width="200"
            data-index="coding"
          >
          </a-table-column>
          <a-table-column
            title="物料名称"
            align="center"
            :width="150"
            data-index="name"
          >
          </a-table-column>
          <a-table-column
            title="销售数量"
            align="center"
            :width="200"
            data-index="amount"
          >
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-input-number
                  :min="1"
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  hide-button
                  v-model="item.number"
                  :disabled="props.disabled"
                ></a-input-number>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            title="出货时间"
            align="center"
            :width="250"
            data-index="time"
          >
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-date-picker
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  v-model="item.deliveryTime"
                  :disabled="props.disabled"
                ></a-date-picker>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            title="出货方式"
            align="center"
            :width="150"
            data-index="ways"
          >
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-select
                  :disabled="props.disabled"
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  default-value="1"
                  v-model="item.deliveryType"
                >
                  <a-option value="1">送货</a-option>
                  <a-option value="2">客户提货</a-option>
                  <a-option value="3">物流运输</a-option>
                  <a-option value="4">快递</a-option>
                  <a-option value="5">其他</a-option>
                </a-select>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            title="产品最短生产周期"
            align="center"
            :width="200"
            data-index="short"
          >
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-input-number
                  :min="1"
                  :disabled="props.disabled"
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  hide-button
                  v-model="item.short"
                ></a-input-number>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            title="产品生产预警"
            align="center"
            :width="200"
            data-index="short"
          >
            <template #title>
              <span>产品生产预警</span>
              <a-tooltip content="提前n天进入生产预警" position="rt">
                <icon-exclamation-circle-fill
                  :style="{
                    color: 'red',
                    fontSize: '16px',
                    marginLeft: '10px',
                  }"
                />
              </a-tooltip>
            </template>
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-input-number
                  :min="1"
                  :disabled="props.disabled"
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  hide-button
                  v-model="item.earlyWarning"
                ></a-input-number>
              </div>
            </template>
          </a-table-column>

          <a-table-column
            title="备注"
            align="center"
            :width="200"
            data-index="remark"
          >
            <template #cell="{ record }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <a-textarea
                  :disabled="props.disabled"
                  :style="
                    index > 0
                      ? {
                          marginTop: '20px',
                        }
                      : ''
                  "
                  :max-length="300"
                  :auto-size="{
                    minRows: 3,
                  }"
                  show-word-limit
                  v-model="item.remark"
                ></a-textarea>
              </div>
            </template>
          </a-table-column>

          <!-- 操作item -->
          <a-table-column
            align="center"
            :width="200"
            fixed="right"
            title="操作"
          >
            <template #cell="{ record, rowIndex }">
              <div
                v-for="(item, index) in record.items"
                :key="item.id || index"
              >
                <icon-plus-circle-fill
                  :style="{
                    color: '#165dff',
                    fontSize: '20px',
                    marginRight: '10px',
                    marginTop: index > 0 ? '20px' : '0px',
                  }"
                  @click="add(record, rowIndex)"
                />
                <a-popconfirm
                  :disabled="props.disabled"
                  @ok="deleteItem(record, rowIndex)"
                  content="确定修改状态吗？"
                  type="error"
                >
                  <icon-minus-circle-fill
                    :style="{
                      color: 'red',
                      fontSize: '20px',
                      marginTop: index > 0 ? '20px' : '0px',
                    }"
                    v-if="record.items.length > 1"
                  />
                </a-popconfirm>
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-space>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    watchEffect,
    type WritableComputedRef,
  } from 'vue';
  import { cloneDeep } from 'lodash';
  import mitter from '@/utils/mitt';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const emit = defineEmits(['update:values', 'update:props']);
  // let copyProps = computed({
  //   get() {
  //     return { ...props.props };
  //   },
  //   set(val) {
  //     emit('update:props', val);
  //   },
  // });

  type production = {
    productionName: string; // 产品名称
    productionNumber: number | undefined; // 产品数量
  };

  type data = {
    date: string | number; // 交货日期
    ways: number; // 交货方式
    production: production[];
  };

  const form: WritableComputedRef<data[]> = computed({
    get() {
      return props.values;
    },
    set(val) {
      emit('update:values', val);
    },
  });
  const orginData = ref(); // 储存原始传过来的数据

  const rules = reactive({
    productionName: [
      {
        required: true,
        message: '请输入产品名称',
      },
    ],
    productionNumber: [
      {
        required: true,
        message: '请输入产品数量',
      },
    ],
    date: [
      {
        required: true,
        message: '请填写交货时间',
      },
    ],

    ways: [
      {
        required: true,
        message: '请选择交货方式',
      },
    ],
  });

  // 添加一小项
  const add = (record: any, index: any) => {
    if (props.disabled) return;
    const item = {
      number: undefined, // 销售数量
      deliveryTime: undefined, // 交货时间
      deliveryType: '1', // 交货方式
      remark: '', // 备注
      short: undefined, // 产品生产最短周期
      earlyWarning: undefined, // 产品生产最短周期
    };
    record.items.splice(index + 1, 0, item);
  };

  // 删除一小项
  const deleteItem = (record: any, index: any) => {
    record.items.splice(index, 1);
  };

  mitter.on('materialRefresh', (res: any) => {
    let data = props.props.data;
    data = [];
    let preData = cloneDeep(props.props.data) || []; // 储存上一次的数据
    orginData.value = res;
    console.log(11, data, preData);
    res.forEach((item: any, index: number) => {
      data.push({
        coding: item.number, // 产品编号
        name: item.name, // 产品名称
        amount: 0,
        items: [
          {
            number: undefined, // 销售数量
            deliveryTime: undefined, // 交货时间
            ways: '1', // 交货方式
            deliveryType: '', // 备注
            short: undefined, // 产品生产最短周期
            earlyWarning: undefined, // 产品生产最短周期
          },
        ],
      });
    });
    data.forEach((item1: any, index1: number) => {
      const temp = preData.find(
        (item2: any, index2: number) => item2.coding === item1.coding
      );
      if (temp) data[index1] = temp;
    });
    props.props.data = data;
  });

  mitter.on('materialDel', (index: any) => {
    props.props.data.splice(index, 1);
  });
</script>

<style scoped lang="less">
  .content {
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    -webkit-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.34);
    padding: 20px 20px;
  }
  .radio {
    :deep(.arco-form-item-content-wrapper) {
      width: 600px;
    }
  }
  :deep(.arco-form-item-content-flex) {
    margin-left: 10px;
  }

  .btn {
    text-align: center;
  }

  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
  }
</style>
